<template>
  <div style="height: 100%">
    <el-dialog title="耗材选择" :show-close="true" :append-to-body="propAppedToBody" :modal-append-to-body="true"
               :visible.sync="visible" :modal="true" width="60%" @open="initShow" @closed="$emit('closed')">
     <!-- 查询区域 -->
      <el-collapse v-model="activeNames" >
        <el-collapse-item title="搜索栏" name="showMatrQueryForm">
        <el-form :inline="true" class="query-form" size="medium" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="耗材名称" prop="matrName">
                <el-input v-model="query.matrName"  placeholder="请输入耗材名称(模糊匹配)" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="耗材品规" prop="busKey">
                <el-input v-model="query.matrSpec"  placeholder="请输入耗材品规(模糊匹配)" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商" prop="supplierId">
                <el-select v-model="query.supplierId" placeholder="请选择">
                  <el-option
                    v-for="item in supplierList"
                    :key = "item.id"
                    :label = "item.name"
                    :value = "item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>          
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="寄售入库" prop="flagConsignment">
                  <el-select v-model="query.flagConsignment" placeholder="请选择"> 
                    <el-option v-for="dict in utils.getDictDataList('common_yes_no') "  
                      :key="dict.value" 
                      :label="dict.label" 
                      :value="dict.value"/>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="一物一码" prop="flagOmoc">
                  <el-select v-model="query.flagOmoc" placeholder="请选择" >
                    <el-option v-for="dict in utils.getDictDataList('common_yes_no') "  
                      :key="dict.value" 
                      :label="dict.label" 
                      :value="dict.value"/>
                  </el-select>
                </el-form-item>
            </el-col>          
            <el-col :span="8">
              <el-form-item>
                <el-button  round @click="resetWrapper" >重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form> 
        </el-collapse-item>
      </el-collapse>
      <DataView ref= "childDataView"
      propViewKey="base_matr"
      propViewForm="base/material/detail.vue"
      :propFlowKey="propFlowKey"
    />
    </div>   
</template>

<script>

export default {
  data() {
    return {
      visible: this.propVisible,
      initSelectedRowKeys: this.propInitSelectedRowKeys,
      showMatrQueryForm: 0,
      selectedRows: []
    }
  },
  methods: {  },
  created() { },
  watch: {
    propVisible(newValue, oldValue) {
      this.visible = newValue
    },
    propInitSelectedRowKeys(newValue, oldValue) {
      this.initSelectedRowKeys = newValue
    },
  },
  props: {
    propInitSelectedRowKeys: '',    // 初始选中行的row-key
    propRowKeysSpliter: {
      type: String,
      default: () => {
        return ','
      }
    }, // 选中行的row-key分隔符,默认以 , 隔开
    propVisible: Boolean,           // 是否可见
    propAllowClear: Boolean,        // 是否允许清空
    propMultiSelect: Boolean,       // 是否允许多选
    propAppedToBody: Boolean,        // 挡在嵌套dialog中，此属性的值需要为true，否则显示会出现问题
    propMetaData: Object,                    // 自定义元数据，在回调时传出
    propQueryModel: Object
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
  }
</style>
